@import 'btn-base';
@import 'base';
@import 'lol-league-modal';
@import 'lol-league-formElement';

/*顶部二级导航条*/

#bodyer {
    background: url("../img/lol-bg.jpg") no-repeat top center;
    padding: 0 0 20px 0;
}

.lol-league-nav {
    height: 50px;
    background: rgba(30, 33, 36, 0.7);
}

.lol-league-nav .active {
    background: #16b2ce;
}

.lol-league-nav li {
    display: inline-block;
    padding: 0 22px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 14px;
    color: #fff;
}

.lol-league-nav li + li {
    margin-left: 100px;
}


/*Globel color*/

.yellowFont {
    color: #ff8400;
}

.greenFont {
    color: #00a686;
}


/* Globel Border */

.statement-left {
    float: left;
    width: 172px;
    height: 182px;
    background: #d7dde4;
    margin-right: 20px;
}

.wrapper-main {
    float: left;
    width: 770px;
}

.wrapper-game-matching {
    padding: 20px;
    background: #fff;
    margin-top: 20px;
}

.wrapper-user-right {
    float: right;
    width: 290px;
    padding: 20px;
    background: #fff;
    margin-top: 20px;
}

.wrapper-statement {
    margin: 0 auto;
    margin-top: 15px;
    letter-spacing: 3px;
    line-height: 27px;
    text-align: center;
}

.wrapper-statement p {
    color: #687580;
    font-size: 14px;
}

.wrapper-statement p span {
    font-size: 24px;
    color: #ee4e10;
}

.statement-center {
    width: 100%;
    display: block;
    padding: 10px 0;
}

.statement-top h3 {
    font-size: 16px;
    color: #16b2ce;
    margin: 0;
    padding: 0;
}

.statement-top h3 img {
    vertical-align: baseline;
}

.statement-top p:last-child {
    color: #44474e;
    line-height: 30px;
    margin-bottom: 10px;
}

.statement-top p span {
    margin-right: 30px;
}

.statement-middle {
    margin-bottom: 15px;
}

.statement-middle div {
    display: inline-block;
}

.statement-middle div p:first-child {
    color: #687580;
    line-height: 27px;
}

.score-style p:last-child {
    color: #ff8400;
    font-size: 14px;
}

.statement-bottom p:last-child {
    color: #ff8400;
    font-size: 16px;
}

.wrapper-border {
    height: 33px;
    border-right: 1px solid #d2e6ea;
    margin: 0 20px;
}

.btn-apply {
    display: block;
    width: 120px;
    height: 34px;
    background: url("../img/lol-icon.png") no-repeat center;
    background-position: -260px -124px;
    font-size: 14px;
    color: #ffffff;
    line-height: 34px;
    margin: 20px auto 0;
    text-align: center;
}


/* 用户登录 */

.wrapper-user-right {
    padding: 0;
}

.user-intro {
    padding: 20px;
}

.user-personal {
    width: 73%;
    margin-left: 10px;
}

.user-name {
    margin-bottom: 2px;
}

.user-gold {
    margin-top: 3px;
    color: #ff8400;
}

.user-intro-middle {
    margin-top: 20px;
    color: #00a686;
}

.border-green {
    border: 1px solid #00a686;
    width: 40px;
    margin-top: 9px;
}

.selection {
    padding-top: 20px;
}

.selection input {
    border: 1px solid #d7dde4;
    width: 100%;
    line-height: 35px;
    padding: 0 6px;
}

.selection .create-name {
    margin-top: 10px;
}


/* 我的好友 */

.user-myFriend h3 {
    color: #3a3f4a;
    line-height: 45px;
    font-size: 16px;
    background: #d7dde4;
    padding: 0 20px;
}

.user-myFriend h3 i {
    color: #687580;
    width: 16px;
    height: 14px;
    vertical-align: middle;
}

.user-myFriend .refresh {
    margin-right: 10px;
}

.user-myFriend .friend-list {
    padding: 0 20px;
}

.user-myFriend .friend-list li {
    padding: 15px 0;
    border-bottom: 1px solid #d2e6ea;
}

.user-myFriend .friend-list li .friend-head {
    margin-right: 10px;
    float: left;
}

.user-myFriend .friend-list li .friend-name img {
    margin-left: 4px;
}

.user-myFriend .friend-list li span {
    color: #687580;
    font-size: 12px;
    margin-right: 10px;
}

.user-myFriend .friend-list li:last-child {
    border: none;
}


/* 第二块 */

.content-head {
    z-index: 1;
    position: relative;
    padding-bottom: 10px;
    border-bottom: 1px solid #d2e6ea;
}

.content-right {
    float: right;
}

.content-right p span:first-child {
    color: #16b2ce;
}

.content-body {
    padding: 20px 0;
    text-align: center;
    font-size: 14px;
}

.main-head p:first-child {
    margin-bottom: 10px;
}

.main-head p:last-child {
    margin-bottom: 20px;
}

.main-body {
    position: relative;
    text-align: center;
}

.game-addr {
    margin-bottom: 20px;
    color: #ff8400;
}

.content-game p {
    font-size: 12px;
    color: #00a686;
}

.content-game div img,
.content-game div p,
.content-game div div {
    margin-bottom: 5px;
}

.content-game div + div {
    margin-left: 10px;
}

.wrap-vs {
    height: 109px;
    width: 100px;
}

.wrap-vs div:first-child {
    height: 20px;
    vertical-align: middle;
}

.usual-vs {
    height: 80px;
    line-height: 80px;
}

.content-foot {
    margin: 0 auto 20px;
    text-align: center;
}

.font-name-left {
    color: #2f2fd8;
}

.font-name-right {
    color: #f32727;
}

.game-intro {
    background: #fff5eb;
    color: #ff8400;
    margin-top: 0;
}

.time-countdown {
    color: #16b2ce;
}

.status {
    margin: 0 auto;
    width: 14px;
    height: 14px
}

.matching-user-img.vip {
    position: relative;
}

.matching-user-img.vip:after {
    bottom: 5px;
    right: 0px;
    content: '';
    width: 14px;
    height: 14px;
    background: url("../img/lol-icon.png") no-repeat center;
    background-position: -206px -24px;
    position: absolute;
}


/* 进入房间 */

.game-room {
    font-size: 12px;
}

.font-capt {
    font-size: 12px;
    color: #16b2ce;
}

.font-user-capt {
    color: #00a686;
    font-size: 14px;
}


/* 比赛结果等待 */

.wrap-waiting {
    padding: 100px 0 0;
}

.wrap-waiting p:first-child {
    margin-bottom: 20px;
}

.btn-wrap {
    width: 260px;
    margin: 0 auto;
    padding: 40px 0 80px;
}

.font18 {
    font-size: 18px;
    text-align: center;
}

.font14 {
    font-size: 14px;
    color: #14b9d6;
    text-align: center;
}


/* 比赛结果 */

.game-result-vs {
    height: 246px;
    line-height: 246px;
}

.pt20 {
    padding-top: 20px;
}

.btn-wrap-result {
    padding: 0 0 20px;
}

.font-result {
    font-size: 14px;
    position: absolute;
    top: 20px;
    left: 335px;
}


/* 查看比赛结果弹窗 */

.modal-wrap-gameResult {
    width: 762px;
}


/* 选择输赢 */

.bg-choose {
    position: absolute;
    left: 0;
    right: 0;
    top: 19px;
    bottom: 0;
    background: url("../img/lol_game-matching/bg-choose.jpg");
}

.bg-height {
    height: 417px;
    position: relative;
}

.user-win a,
.user-lose a {
    display: inline-block;
}

.user-win a img,
.user-lose a img {
    display: block;
    margin: 0 auto;
}

.user-win a img:first-child,
.user-lose a img:first-child {
    margin-bottom: 10px;
}

.user-choose {
    position: relative;
    padding: 134px 50px;
}


/* 5.10修改 */

.statement-top h3 i {
    font-size: 12px;
    color: #d6ddea;
}

.statement-top h3 i.active {
    color: #ff7e00;
}

.score-style {
    position: relative;
}

.score-style i {
    position: absolute;
    bottom: 0;
    right: -14px;
    font-size: 12px;
    color: #d6ddea;
}

.selection select {
    width: 100%;
    height: 35px;
    background: #d7dde4;
    line-height: 35px;
    border: 1px solid #d7dde4;
    padding: 0 6px;
}

.selection select option {
    width: 100%;
    height: 35px;
    background: #fff;
    line-height: 35px;
    padding: 0 6px;
}

.selection select option + option {
    border-top: 1px solid #d7dde4;
}

.status-green {
    color: #7fba2a;
}

.status-red {
    color: #ee4e10;
}

.status-grey {
    color: #687580;
}

.user-myFriend .icon-user-group,
.user-myFriend .icon-addFriends {
    font-size: 20px;
}


/* 5.11 */

.btn-addFriends {
    display: inline-block;
    padding: 6px 0;
    border-radius: 0;
    vertical-align: bottom;
}

.deco-addFriends {
    width: 258px;
    vertical-align: bottom;
    height: 33px;
    margin-right: 8px;
    border-radius: 0;
    border: 1px solid #d7dde4;
}

.form-inline .deco-addFriends {
    width: 258px;
}
.modal-add-friend{
  min-height: 166px;
  padding-top: 50px;
}
.modal-add-friend-list {
    width: 258px;
    border: 1px solid #d7dde4;
    margin: 10px 0 0 34px;
    li + li {
        border-top: 1px solid #d7dde4;
    }
    li:hover {
        background: #efefef;
        a {
            color: #14b9d6;
        }
    }
}

.wrapper-friends-list {
    position: relative;
    width: 100%;
    height: 56px;
    padding: 8px 10px;
    img {
        margin-right: 10px;
        display: block;
    }
}

.intro-friends {
    height: 40px;
    line-height: 40px;
    width: 78%;
    text-align: left;
    p {
        max-width: 154px;
    }
}

.user-level {
    padding: 13px 0;
    i {
        display: block;
        width: 14px;
        height: 14px;
        background: url("../img/lol-icon.png") -206px -24px;
    }
}

.block-add {
    position: absolute;
    right: 0;
    padding: 8px 10px;
    a {
        color: #d7dde4;
    }
}
/*lol联赛默认弹窗宽度*/
.league-modal-wrap{
    width: 490px;
}
